<template>
   <!-- 定义了一个相对定位的容器，使用flex布局，垂直和水平居中 -->
  <div class="relative z-10 flex flex-col items-center justify-center h-screen">
    <!-- 标题，使用类来控制颜色和大小 -->
    <h1
      class="text-gray-600 dark:text-white text-center text-5xl font-bold mb-10 uppercase"
    >
      Login System
    </h1>
    <!-- 使用Element UI的卡片组件，包含登录表单 -->
    <el-card v-loading="loading" class="w-[24rem] rounded-3xl">
      <div class="text-center mb-4">
        <h2 class="text-gray-600 dark:text-white text-xl">
          登录
        </h2>
      </div>
      <div class="pt-6">
        <el-input
            class="mb-2 h-10"
            v-model="userId"
            placeholder="请输入账号ID"
        />
        <el-input
            class="mb-2 h-10"
            v-model="password"
            type="password"
            placeholder="请输入密码"
        />
        <el-radio-group class="mb-2 w-full flex" v-model="userRole">
          <div class="w-1/2 pr-2">
            <el-radio class="w-full m-0" value="student" size="large" border
            >我是学生</el-radio
            >
          </div>
          <div class="w-1/2 pl-2">
            <el-radio
                class="w-full m-0"
                value="administrator"
                size="large"
                border
            >我是管理员</el-radio
            >
          </div>
        </el-radio-group>
        <div class="mt-8">
          <el-button
            class="w-full py-3 rounded-xl"
            type="primary"
            link
            @click="handleRegister"
          >还没有账号？点此注册</el-button>
        </div>
        <el-button
            class="w-full py-6 my-2 rounded-xl"
            type="primary"
            @click="handleLogin"
        >立刻登录</el-button
        >
      </div>
    </el-card>
     <!-- 暗黑模式切换按钮 -->
    <div class="mt-10">
      <el-button
        link
        @click="darkModeSwitch"
        class="text-black dark:text-white font-bold flex items-center gap-4 text-sm dark:hidden"
      >
        <el-icon :size="50"><MoonNight /></el-icon>
      </el-button>
      <el-button
        link
        @click="darkModeSwitch"
        class="text-black dark:text-white font-bold items-center gap-4 text-sm hidden dark:flex"
      >
        <el-icon :size="50"><Sunset /></el-icon>
      </el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { darkModeSwitch } from "@/core/utils/darkModeSwitch.js";
import { ApiBase } from "@/core/api";
import JwtService from "@/core/services/JwtService";
import { MoonNight, Sunset } from "@element-plus/icons-vue";
import { useStuIdStore } from "@/stores/stuIdStore";

const loading = ref(false);
const stuIdStore = useStuIdStore();
const router = useRouter();
const userId = ref("");
const password = ref("");
const confirmPassword = ref("");
const userRole = ref("student");

// 定义登录处理函数
const handleLogin = async () => {
  loading.value = true;// 显示加载动画
  localStorage.setItem("userRole", userRole.value);// 存储用户角色
   // 发起登录请求
  const response = await ApiBase.login({
    sId: userId.value,
    stuPassword: password.value,
    role: userRole.value,
  });
  // 检查响应状态
  if (response.code == 0) {
    localStorage.setItem("userRole", userRole.value);
    JwtService.saveToken(response.data.token);
    stuIdStore.setStuId(userId.value);
    if (userRole.value === "student") {
      router.push("/user-settings");
    } else if (userRole.value === "administrator") {
      router.push("/home");
    }
  }
  loading.value = false;
};

// 定义注册处理函数
const handleRegister = () => {
  router.push("/signup");
};
</script>
